<template>
  <div class="login-container">
    <div class="f-language-selector">
      <!-- <el-select style="width: 90px" size="small" v-model="selectedLanguage" @change="changeLanguage">
        <el-option v-for="item in languageOptions" :key="item.value" :label="item.label"
          :value="item.value"></el-option>
      </el-select> -->
      <el-button style="width: 70px;margin-left: 10px;" size="small" round @click="signIn">{{ $t("login.signIn")
        }}</el-button>
      <el-button style="width: 70px" size="small" round @click="register">{{
        $t("login.register")
        }}</el-button>
    </div>
    <el-card class="r-login-card">
      <div>
        <div class="r-login-title">{{ $t("login.title") }}</div>
      </div>
      <div>
        <div class="r-login-text">{{ $t("login.signUp") }}</div>
      </div>
      <el-form style="width: 100%;" :rules="rules" label-position="top" label-width="80px" ref="registerForm"
        :model="form">
        <el-form-item :label="$t('login.email')" prop="email">
          <el-input v-model="form.email" :placeholder="$t('login.emailPlaceholder')" maxlength="50" show-word-limit
            clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.userName')" prop="userName">
          <el-input v-model="form.userName" :placeholder="$t('login.userNamePlaceholder')" maxlength="50"
            show-word-limit clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="password">
          <el-input v-model="form.password" :placeholder="$t('login.passwordPlaceholder')" maxlength="50" show-password
            clearable></el-input>
          <div class="input_span">
            <span
              :style="{ 'background-color': (this.msgText > 1 || this.msgText == 1) ? '#FC5F76' : '#BBBBBB', 'color': (this.msgText > 1 || this.msgText == 1) ? '#FC5F76' : '#BBBBBB' }">{{ $t('login.weak')}}</span>
            <span
              :style="{ 'background-color': (this.msgText > 2 || this.msgText == 2) ? '#FF9900' : '#BBBBBB', 'color': (this.msgText > 2 || this.msgText == 2) ? '#FF9900' : '#BBBBBB' }">{{ $t('login.middle') }}</span>
            <span
              :style="{ 'background-color': (this.msgText > 4 || this.msgText == 4) ? '#33CC00' : '#BBBBBB', 'color': (this.msgText > 4 || this.msgText == 4) ? '#33CC00' : '#BBBBBB' }">{{ $t('login.strong') }}</span>
          </div>
        </el-form-item>
        <el-form-item :label="$t('login.confirmPassword')" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" :placeholder="$t('login.confirmPasswordPlaceholder')" maxlength="50"
            show-password clearable></el-input>
        </el-form-item>
      </el-form>
      <el-row style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-button :loading="registerLoading" @click="submitForm"
            style="background-color: #febc1c; color: black; width: 100%">{{ $t("login.register") }}</el-button>
        </el-col>
      </el-row>
      <div class="login-bottom-text">
        <span style="color: #909399;">{{ $t("login.haveAccount") }}</span>
        <router-link style="color: black;" class="common-link" to="/login" type="info" :underline="false">{{
          $t("login.loginText") }}</router-link>
      </div>
    </el-card>
  </div>
</template>

<script>

import { sendVerifyCode } from '../../api/userService'

export default {
  data() {
    return {
      form: {
        email: "",
        account: "",
        password: "",
        userName: "",
        confirmPassword: ""
      },
      rules: {
        email: [
          { required: true, message: this.$t("login.emailPlaceholder"), trigger: 'blur' },
          { type: 'email', message: this.$t("login.emailCheck"), trigger: ['blur', 'change'] }
        ],
        userName: [
          {
            required: true,
            message: this.$t("login.userNamePlaceholder"),
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: this.$t("login.passwordPlaceholder"),
            trigger: "blur"
          }
        ],
        confirmPassword: [
          {
            required: true,
            message: this.$t("login.confirmPasswordPlaceholder"),
            trigger: "blur"
          }
        ]
      },
      registerLoading: false,
      selectedLanguage: "en",
      languageOptions: [
        { value: "en", label: "English" },
        { value: "zh", label: "中文" }
      ],
      msgText: '',
    };
  },
  methods: {
    submitForm() {
      this.$refs["registerForm"].validate(valid => {
        if (valid) {
          if (this.form.password !== this.form.confirmPassword) {
            this.$message.error(this.$t("login.passwordNotMatch"));
            return;
          }
          if (this.msgText < 4) {
            this.$message.error(this.$t("login.passwordTip"));
            return;
          }
          this.handleRegister();
        } else {
          return false;
        }
      });
    },
    async handleRegister() {
      this.registerLoading = true;
      try {
        this.form.email = this.form.email;
        this.form.account = this.form.email;
        await sendVerifyCode(this.form.email,'register').then(res => {
          if (res.code === 200) {
              this.$message({
                message: this.$t("login.verificationSuccess"),
                type: "success"
              });
              setTimeout(() => {
                this.$router.push({
                  name: "registerVerification", query: {
                    email: this.form.email,
                    password: this.form.confirmPassword,
                    userName: this.form.userName,
                    account: this.form.account
                  }
                });
              }, 1000);
          } else {
            this.registerLoading = false;
            this.$message.error(res.msg)
          }
        });
      } catch (error) {
        this.registerLoading = false;
        this.$message.error(error.message);
      }
    },
    register(e) {
      this.$router.push("/register");
    },
    signIn() {
      this.$router.push("/login");
    },
    changeLanguage(e) {
      this.$nextTick(() => {
        localStorage.removeItem("lang");
        localStorage.setItem("lang", e);
        this.$i18n.locale = e;
      });
    },
    checkStrong(sValue) {
      var modes = 0;
      //正则表达式验证符合要求的
      if (sValue.length < 8) return modes;
      if (/\d/.test(sValue)) modes++; //数字
      if (/[a-z]/.test(sValue)) modes++; //小写
      if (/[A-Z]/.test(sValue)) modes++; //大写
      if (/\W/.test(sValue)) modes++; //特殊字符
      // console.log("modes:", sValue.length, modes)
      //逻辑处理
      switch (modes) {
        case 1:
          return 1;
          break;
        case 2:
          return 2;
          break;
        case 3:
        case 4:
          return sValue.length < 4 ? 3 : 4;
          break;
      }
      return modes;
    },
  },
  mounted() {
    // 页面刷新后默认语言为英语
    localStorage.removeItem("lang");
    localStorage.setItem("lang", "en");
  },

  watch: {
    'form.password': {
      handler(keyWord, oldname) {
        this.msgText = this.checkStrong(keyWord);
      }
    }
  },
  created() {
    if (this.form.password) {
      this.msgText = this.checkStrong(this.loginForm.password);
    }
  },
};
</script>

<style scoped>
::v-deep .el-select .el-input__inner {
  border-radius: 15px;
  /* 设置圆角大小 */
}

@import "../../assets/css/RegisterPage.css";

@media (max-width: 600px) {
  .el-form {
    width: 100%;
  }
}
</style>
